<template>
  <div class="container" ref="mainCon">
    <el-row class="topContent">
      <div class="topBoxTitle">
        <el-col :span="16">
          <div style="vertical-align: middle; line-height: 54px; height: 54px">
            <span class="titleTop" style="vertical-align: middle"
              >企业人员工资</span
            >
            <el-link
              type="primary"
              style="vertical-align: middle"
              @click="downLoad('salaryOperate')"
              class="uploadBtn"
              >点击下载操作说明</el-link
            >
          </div>
        </el-col>
        <el-col :span="8" class="alignRight">
          <div>
            <el-button
              round
              type="primary"
              @click="toCreateSalary"
              class="createSalaryBut"
              v-show="makeSalaryBtn"
            >
              制作工资表
            </el-button>
            <el-button
              round
              type="primary"
              @click="toSalaryAccount"
              class="createSalaryBut"
              v-show="salaryAccountBtn"
            >
              工资专户管理
            </el-button>
          </div>
        </el-col>
      </div>
    </el-row>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="年度" class="row-padding-bottom">
              <el-select
                v-model="filterField.year"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in yearOptions"
                  :key="item.id"
                  :label="item.text"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="月份" class="row-padding-bottom">
              <el-select
                v-model="filterField.month"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in monthOptions"
                  :key="item.id"
                  :label="item.text"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="工资表状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.status"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in salaryStateOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-form-item>
                        <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchList" class="commonBtn"></el-button>
                    </el-form-item> -->
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="salaryList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="year,month,batchNo,createTime"
            label="工资表信息"
            min-width="230px"
          >
            <template slot-scope="scope">
              <p style="olor: rgb(96, 98, 102); font-weight: bold">
                {{ scope.row.year || '--' }}年{{
                  scope.row.month || '--'
                }}月第{{ scope.row.batchNo || '--' }}批次工资
              </p>
              <p style="color: #999; font-size: 12px">
                创建日期： {{ scope.row.createTime || '--' }}
              </p>
              <p style="color: #999; font-size: 12px">
                订单号：
                {{
                  scope.row.sequenceCode != null ? scope.row.sequenceCode : '--'
                }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="shouldPay"
            label="应发工资总额（元）"
            align="center"
            min-width="160px"
          >
            <template slot-scope="scope">
              <p>
                ￥{{ scope.row.shouldPay != null ? scope.row.shouldPay : '--' }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="shouldPayCount"
            label="应发总人数"
            align="center"
            :formatter="formatTd"
            min-width="110px"
          ></el-table-column>
          <el-table-column
            prop="bankActPay"
            label="实发工资总额（元）"
            align="center"
            min-width="160px"
          >
            <template slot-scope="scope">
              <p>
                ￥{{
                  scope.row.bankActPay != null ? scope.row.bankActPay : '--'
                }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="bankActPayCount"
            label="实发总人数"
            align="center"
            :formatter="formatTd"
            min-width="120"
          ></el-table-column>
          <el-table-column
            prop="total,poundage"
            label="实付信息"
            align="center"
            min-width="140"
          >
            <template slot-scope="scope">
              <p style="color: #fcb322; font-weight: bold">
                ￥{{ scope.row.total != null ? scope.row.total : '--' }}
              </p>
              <p style="color: #999; font-size: 12px">
                含手续费￥{{
                  scope.row.poundage != null ? scope.row.poundage : '--'
                }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="statusName"
            label="工资表状态"
            align="center"
            min-width="120px"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.statusName == '待提交'">
                <p>{{ scope.row.statusName }}</p>
              </div>
              <div v-else>
                <div v-if="scope.row.statusName == '发放失败'">
                  <p style="color: #d41212">{{ scope.row.statusName }}</p>
                </div>
                <div v-else>
                  <p>{{ scope.row.statusName }}</p>
                </div>
                <el-link
                  type="primary"
                  v-show="isShowDetail"
                  @click="toSalaryDetail(scope.$index, scope.row)"
                  style="margin-right: 0 !important"
                  >查看详情</el-link
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" fixed="right" width="280">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 'NO_PAY'">
                <!-- <el-button size="small" @click="toPay(scope.$index, scope.row)" type="primary" v-show="payBtn">上报</el-button> -->
                <el-link
                  @click="toPay(scope.$index, scope.row)"
                  type="primary"
                  v-show="payBtn"
                  >上报</el-link
                >
                <!-- <span> -->
                <el-link
                  type="primary"
                  @click="toGiveUpPayOff(scope.$index, scope.row)"
                  v-show="cancelPayBtn"
                  >取消支付</el-link
                >
                <!-- </span> -->
                <!-- <span> -->
                <el-link
                  type="primary"
                  @click="exporTableAjax(scope.$index, scope.row)"
                  v-show="exportBtn"
                  >导出工资表</el-link
                >
                <!-- </span> -->
              </div>
              <div v-else-if="scope.row.status == 'CONFIRMED'">
                <el-link
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)"
                  v-show="editBtn"
                  >继续编辑</el-link
                >
                <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)" type="primary"  class="saveBtn" v-show="editBtn">继续编辑</el-button> -->
                <!-- <span> -->
                <el-link
                  type="primary"
                  @click="exporTableAjax(scope.$index, scope.row)"
                  v-show="exportBtn"
                  >导出工资表</el-link
                >
                <!-- </span> -->
                <!-- <span> -->
                <el-link
                  type="primary"
                  @click="deleteSalary(scope.$index, scope.row)"
                  v-show="delBtn"
                  >删除</el-link
                >
                <!-- </span> -->
              </div>
              <div v-else>
                <!-- <span> -->
                <el-link
                  type="primary"
                  @click="exporTableAjax(scope.$index, scope.row)"
                  v-show="exportBtn"
                  >导出工资表</el-link
                >
                <span v-show="!exportBtn">--</span>
                <!-- </span> -->
              </div>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关企业人员工资数据"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'
import scrollTable from '@/mixin/scrollTable.js'

export default {
  name: 'qySalaryList',
  mixins: [scrollTable],
  data() {
    return {
      advanced: false,
      yearOptions: [
        { id: 2019, text: '2019年' },
        { id: 2020, text: '2020年' },
        { id: 2021, text: '2021年' },
      ],
      monthOptions: [
        { id: 1, text: '1月' },
        { id: 2, text: '2月' },
        { id: 3, text: '3月' },
        { id: 4, text: '4月' },
        { id: 5, text: '5月' },
        { id: 6, text: '6月' },
        { id: 7, text: '7月' },
        { id: 8, text: '8月' },
        { id: 9, text: '9月' },
        { id: 10, text: '10月' },
        { id: 11, text: '11月' },
        { id: 12, text: '12月' },
      ],
      salaryStateOptions: [], //工资表状态下拉框
      requestUrl: 'api-su/salary/expand/salarylist',
      //表格数据
      salaryList: [],
      //分页
      // currentPage: 1,
      // total: 0,
      // pageSize: 10,
      batchId: '', //工资表详情id
      //搜索条件
      filterField: {
        year: '',
        month: '',
        status: '',
      },
      isShow: false, //列表加载
      loading: true,
      editBtn: false, //编辑
      exportBtn: false, //导出
      delBtn: false, //删除
      payBtn: false, //支付
      cancelPayBtn: false, //取消支付
      makeSalaryBtn: false, //制作工资表
      salaryAccountBtn: false, //工资专户管理
      isShowDetail: false,
    }
  },
  created() {
    this.$store.state.activeMenu = '/home/salary/qySalaryList'

    //工资表状态下拉框
    this.getSalaryState()
    //初始化表格
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })

    //权限按钮
    this.editBtn =
      this.$store.state.buttonLimitsArr.indexOf('ncSalary:update') > -1
    this.exportBtn =
      this.$store.state.buttonLimitsArr.indexOf('ncSalary:export') > -1
    this.delBtn =
      this.$store.state.buttonLimitsArr.indexOf('ncSalary:delete') > -1
    this.payBtn =
      this.$store.state.buttonLimitsArr.indexOf('ncSalary:update') > -1
    this.cancelPayBtn =
      this.$store.state.buttonLimitsArr.indexOf('ncSalary:update') > -1
    this.makeSalaryBtn =
      this.$store.state.buttonLimitsArr.indexOf('ncSalary:add') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('ncSalary:export') > -1
    this.salaryAccountBtn =
      this.$store.state.buttonLimitsArr.indexOf('ncSalary:update') > -1
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('ncSalary:detail') > -1
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getTableList(data) {
      this.salaryList = data
      this.loading = false
      if (this.salaryList.length < 1) {
        this.isShow = true
      }
    },
    getSalaryState() {
      this.axios({
        method: 'post',
        url: 'api-su/salary/expand/statuslist',
      })
        .then((response) => {
          this.salaryStateOptions = response.data
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    downLoad(type) {
      this.axios({
        method: 'post',
        url: 'api-su/salary/expand/findurl',
        data: {
          name: type,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              window.open(response.data.result.url)
            } else {
              this.$message({
                type: 'error',
                message: response.data.msg,
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //跳转详情
    toSalaryDetail(index, row) {
      this.batchId = row.id
      this.$router.push({
        path: '/home/salary/salaryDetail/',
        name: 'salaryDetail',
        query: {
          batchId: this.batchId,
          payType: row.payType,
          salaryId: row.id,
          sequenceCode: row.sequenceCode,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salary/qySalaryList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    handleEdit(index, row) {
      this.$router.push({
        path: '/home/salary/editSalary',
        name: 'editSalary',
        query: {
          salaryId: row.id,
          month: row.month,
          year: row.year,
          type: 'list',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salary/qySalaryList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    //导出工资表
    exporTableAjax(index, row) {
      var id = row.id
      window.location.href =
        common.commonApi +
        'api-su/salary/expand/export?salaryId=' +
        id +
        '&access_token=' +
        localStorage.getItem('access_token')
    },
    deleteSalary(index, row) {
      this.$confirm('确认删除该工资表吗?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.toDel(row.id)
        })
        .catch(() => {
          // this.$message.error("删除失败");
        })
    },
    toDel(salaryId) {
      this.axios({
        method: 'post',
        url: 'api-su/salary/expand/deletesalary',
        data: {
          salaryId: salaryId,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              //删除成功刷新列表
              this.$refs.pagination.getTableListData()
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //跳转制作工资表
    toCreateSalary() {
      this.$router.push('/home/salary/createSalaryWay')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salary/qySalaryList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //跳转工资专户
    toSalaryAccount() {
      this.$router.push('/home/salary/salaryAccount')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salary/qySalaryList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 是否取消支付
    toGiveUpPayOff(index, row) {
      this.$confirm(
        '取消支付后, 工资表的流程将终止,变为已取消状态，是否确定取消',
        '温馨提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.giveUpPayOff(index, row)
        })
        .catch(() => {})
    },
    //确认取消支付
    giveUpPayOff(index, row) {
      this.axios({
        method: 'post',
        url: 'api-sp/unionpay/cancel',
        data: {
          salaryId: row.id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              message: '取消支付成功',
              type: 'success',
            })
            this.$refs.pagination.getTableListData()
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {})
    },
    //立即支付
    toPay(index, row) {
      // this.$router.push({
      //     path: "/home/salary/paySalary",
      //     name: "paySalary",
      //     query: {
      //         salaryId: row.id
      //     }
      // });
      this.$router.push({
        path: '/home/constructSalary/constructPaySalaryWay',
        name: 'constructPaySalaryWay',
        query: {
          salaryId: row.id,
          year: row.year,
          month: row.month,
          type: 'list',
          wherePage: 'fj', //非建
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salary/qySalaryList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '../../../static/css/filterArea.less';
.topContent {
  // background: #e4ebf1;
  height: 54px;
  line-height: 54px;
  // padding: 0 24px;
  .topBoxTitle {
    width: 100%;
    height: 54px;
    position: relative;
    padding: 0 24px;
    &:after {
      position: absolute;
      right: 0;
      top: 54px;
      left: 0;
      height: 1px;
      content: '';
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      background-color: #e3e7e9;
      z-index: 10;
    }
  }
  .titleTop {
    font: bold 18px Microsoft YaHei;
    color: #333333;
  }
  .alignRight {
    text-align: right;
  }
  .createSalaryBut {
    background: #009588;
    border: 1px solid #009588;
    padding: 10px 23px;
    &:hover {
      opacity: 0.8;
    }
  }
  // .salaryAccountBut {
  //     background: #e4ebf1;
  //     color: #009588;
  //     border: 1px solid #009588;
  //     padding: 10px 23px;
  //     &:hover {
  //         background: rgba(0, 149, 136, 0.1);
  //     }
  // }
}
.toDownload {
  font-size: 14px;
  color: #0098ce;
  cursor: pointer;
  &:hover {
    color: #0070f5;
    border-bottom: 1px solid #0070f5;
  }
}

.uploadBtn {
  line-height: 20px !important;
  height: 20px;
  margin-left: 8px;
}

.mainCon {
  top: 212px;
  @media screen and (min-width: 1280px) and (max-width: 1366px) {
    .searchInputWidth /deep/.el-form-item__label {
      width: 82px;
    }
  }
}
</style>
